<?
$num=0;
$sid="";
if (isset($id)) {
	$num=$id;
	$id=" id='".$id."'";
	$sid=" id='".$id."-slider'";
} else {
	$id="";
}
if(!isset($title))
	$title="Sample Playlist";
?>
<div<?=$id?> class="playlist ui-accordion ui-widget ui-helper-reset ui-accordion-icons">
	<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top ui-state-focus"><a href="javascript: void(0)" class="no-icon"><?=$title?></a></h3>
	<div class="ui-helper-reset ui-widget-header playlist-controller" style="padding:.5em;" data="{playlist_num:<?=$num?>}" >
		<!-- Media Controller -->
		<div class="buttonset" style="float:left;">
			<button class="previous-button">Previous</button>
			<button class="play-button">Play</button>
			<button class="pause-button">Pause</button>
			<button class="next-button">Next</button>
		</div>
		<div class="slider-holder" style="width:60%;float:right; padding-top:.9em;padding-right:.5em;">
			<div class="pos-slider"<?=$sid?>></div>
		</div>
		<div style="width:100%;clear:both;"></div>
	</div>
	<div class="ui-helper-reset ui-widget-header playlist-progressbar" style="padding:.5em;" data="{playlist_num:<?=$num?>}" >
		<div class="load-progress"></div>
	</div>
	<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-accordion-content-active" style="height:200px;overflow-y:scroll;overflow-x:hidden;">
		<div class="playlist-sortable" data="{playlist_num:<?=$num?>}">
		</div>
	</div>
	<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-bl ui-corner-br ui-state-focus" style="margin-top:-2px;"><span class="pos-provider"></span><span class="ui-icon ui-icon-plusthick"></span><a href="javascript: void(0)" class="add-track-btn" data="{playlist-id:'<?=$id?>'}">Add Track</a></h3>
</div>
